<extend name="Common/base"/>
<block name="title">课程体系</block>
<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/tixi.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/styles/fancyInput.css">
    <style>
        .section .header-title {width: auto}
        .empty {display: none!important;}
        .tixi {opacity: 0;}
    </style>
</block>

<block name="content">
    <div class="section" style="display: flex;justify-content: center;align-items: center;">
        <div class="header-title">
            <h2 class="cn-title">设计课程体系</h2>
            <h3 class="en-title">CURRICULUM SYSTEM</h3>
        </div>
        <div class="row tixi">
            <div class="col-md-6  col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02a7c5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-pingmian icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>素描基础</h4>
                    <p>1 透视/点线面/构图</p>
                    <p>2 为平面基础铺垫</p>
                    <p>3 为后期设计做铺垫</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02bfc5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-computer icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>平面设计</h4>
                    <p>1 熟练 PS AI CDR 技能操作</p>
                    <p>2 掌握不同布局，突出排版重点</p>
                    <p>3 掌握不同配色，突出画面美感</p>
                    <p>4 掌握不同风格，突出独特设计</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #01c595">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-phone icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>网页设计</h4>
                    <p>1 企业网站设计</p>
                    <p>2 电商网站设计</p>
                    <p>3 详情页设计</p>
                    <p>4 不同风格设计不同网站</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02a7c5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-sumiao icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>UI设计</h4>
                    <p>1 UI规范设计</p>
                    <p>2 UI视觉设计</p>
                    <p>3 UI交互设计</p>
                    <p>4 设计一套APP</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section" style="display: flex;justify-content: center;align-items: center;">
        <div class="header-title">
            <h2 class="cn-title">PHP 课程体系</h2>
            <h3 class="en-title">CURRICULUM SYSTEM</h3>
        </div>
        <div class="row tixi">
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02a7c5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-html5 icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>前端开发</h4>
                    <p>1 web前端</p>
                    <p>2 javascript与jquery框架</p>
                    <p>3 HTML5+CSS3</p>
                    <p>4 FTP与SVN</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02bfc5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-php icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>PHP基础</h4>
                    <p>1 PHP字符串与数组</p>
                    <p>2 PHP文件操作、文件上传</p>
                    <p>3 Mysql</p>
                    <p>4 PHP图像处理</p>
                    <p>5 面向对象编程</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #01c595">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-world icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>网站开发</h4>
                    <p>1 企业网站开发</p>
                    <p>2 电商网站开发</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-5 col-sm-push-1 col-xs-5 col-xs-push-1 " style="background: #02a7c5">
                <div class="col-md-6  col-sm-6 col-xs-6 pc ms-icon ms-icon-wechat icons"></div>
                <div class="col-md-6  col-sm-12 col-xs-12 ">
                    <h4>微信开发</h4>
                    <p>1  PHP curl</p>
                    <p>2 微信公众号接入</p>
                    <p>3 微信各种消息接口</p>
                    <p>4 微信公众号自定义菜单</p>
                    <p>5 微信模板消息</p>
                    <p>6 微信JS SDK</p>
                </div>
            </div>
        </div>
    </div>

</block>
<block name="footer_content">
    <div class="header-title">
        <h2 class="cn-title">我们的特色</h2>
    </div>
    <div class="service row">
        <div class="col-md-8 col-md-push-2" style="height: 30rem">
            <section class='input' style="display: block; margin-bottom: 1rem">
                <input class="i1" placeholder='type something...' />
            </section>
            <section class='input2' style="display: block">
                <input class="i2" placeholder='type something...' />
            </section>
            <section class='input3' style="display: block">
                <input class="i3" placeholder='type something...' />
            </section>
        </div>
    </div>
</block>
<block name="js">
    <script src='__PUBLIC__/Home/scripts/fancyInput.js'></script>
    <script>
        $(function(){
            var status = 0;
            $('.container').fullpage({
                afterLoad:function(link, index){
                    $('.section').eq(index-1).find('.header-title').css('opacity',1).addClass('animated bounceInUp');
                    $('.section').eq(index-1).find('.tixi').css('opacity',1).addClass('animated jackInTheBox');
                    if (index == 4 && status == 0) {
                        init();
                        status = 1;
                    }
                },
                verticalCentered : false,
                resize : true
            });
        })
        $('section :input').val('').fancyInput()[0].focus();

        // Everything below is only for the DEMO
        function init(str){
            var input = $('section.input input').val('')[0],
                s = '我们的特色：零基础入学、高薪就业。'.split('').reverse(),
                len = s.length-1,
                e = $.Event('keypress');

            input.nextElementSibling.className = '';

            var	initInterval = setInterval(function() {
                if (s.length) {
                    var c = s.pop();
                    fancyInput.writer(c, input, len - s.length).setCaret(input);
                    input.value += c;
                }
                else {
                    clearInterval(initInterval);
                    $('section :input').eq(1).val('').fancyInput()[0].focus();
                    var input2 = $('section.input2 input').val('')[0],
                        s2 = '学习周期：（含项目实操）3个月到4个月、'.split('').reverse(),
                        len2 = s2.length - 1,
                        e2 = $.Event('keypress');

                    input2.nextElementSibling.className = '';

                    var initInterval2 = setInterval(function () {
                        if (s2.length) {
                            var c2 = s2.pop();
                            fancyInput.writer(c2, input2, len2 - s2.length).setCaret(input2);
                            input2.value += c2;
                        }
                        else {
                            clearInterval(initInterval2);
                            $('section :input').eq(2).val('').fancyInput()[0].focus();
                            var input3 = $('section.input3 input').val('')[0],
                                s3 = '行政班次上课、小班教学制、教学质量管控、性价比高'.split('').reverse(),
                                len3 = s3.length - 1,
                                e3 = $.Event('keypress');

                            input3.nextElementSibling.className = '';

                            var initInterval3 = setInterval(function () {
                                if (s3.length) {
                                    var c3 = s3.pop();
                                    fancyInput.writer(c3, input3, len3 - s3.length).setCaret(input3);
                                    input3.value += c3;
                                }
                                else {
                                    clearInterval(initInterval3);
                                }
                            }, 150);


                        }
                    }, 150);
                }
            },150);
        }
    </script>
</block>